<template>
  <div class="container">
    <div class="apply-box flexCol Xcenter">
      <div class="title">立即报名</div>
      <div class="content">填写参赛报名表</div>
    </div>
    <div class="w1420 flexRow Xbetween">
      <div class="content-box">
        <div class="form">
          <el-form
            ref="form"
            label-position="right"
            label-width="165px"
            :model="formObj"
            :rules="rules"
          >
            <div class="title nomt">项目信息</div>
            <el-form-item label="项目名称" prop="project_name">
              <el-input
                v-model="formObj.project_name"
                placeholder="请输入项目名称"
              ></el-input>
            </el-form-item>
            <el-form-item prop="referrals">
              <el-radio-group v-model="formObj.referrals">
                <el-radio :label="1">项目推荐</el-radio>
                <el-radio :label="2">现场挑战赛</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="参赛类型" prop="type">
              <el-radio-group v-model="formObj.type">
                <el-radio :label="1">成果类</el-radio>
                <el-radio :label="2">创意类</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="专利申请号" prop="patent_number">
              <el-input
                v-model="formObj.patent_number"
                placeholder="请输入专利申请号"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请日期" prop="date">
              <div class="flexRow Xbetween">
                <!-- <el-date-picker
                  style="width: 257px"
                  v-model="value1"
                  type="year"
                  placeholder="请输入年份"
                  value-format="yyyy"
                  format="yyyy"
                >
                </el-date-picker>
                <el-date-picker
                  style="width: 257px"
                  v-model="value1"
                  type="month"
                  placeholder="请输入月份"
                  value-format="MM"
                  format="MM"
                >
                </el-date-picker> -->
                <el-date-picker
                  style="width: 257px"
                  v-model="formObj.date"
                  type="date"
                  placeholder="请输入申请日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="呈现形式" prop="modality">
              <el-radio-group v-model="formObj.modality">
                <el-radio :label="1">有模型</el-radio>
                <el-radio :label="2">有论文</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="title">作者信息</div>
            <el-form-item label="作者姓名" prop="name">
              <el-input v-model="formObj.name" placeholder="请输入第一作者姓名">
              </el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formObj.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生年月" prop="birth">
              <div class="flexRow Xbetween">
                <!-- <el-date-picker
                  style="width: 257px"
                  v-model="value1"
                  type="year"
                  placeholder="请输入年份"
                  value-format="yyyy"
                  format="yyyy"
                >
                </el-date-picker>
                <el-date-picker
                  style="width: 257px"
                  v-model="value1"
                  type="month"
                  placeholder="请输入月份"
                  value-format="MM"
                  format="MM"
                >
                </el-date-picker> -->
                <el-date-picker
                  style="width: 257px"
                  v-model="formObj.birth"
                  type="date"
                  placeholder="请输入出生年月"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="区域" prop="region_id">
              <el-select
                v-model="formObj.region_id"
                style="width: 257px"
                placeholder="请选择"
                @change="regionChange"
              >
                <el-option
                  v-for="(item, index) in regionList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="省份" prop="province_id">
              <el-select
                v-model="formObj.province_id"
                style="width: 257px"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in provinceList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="民族" prop="nation">
              <el-select
                v-model="formObj.nation"
                style="width: 257px"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in nationList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文化程度" prop="culture">
              <el-select
                v-model="formObj.culture"
                style="width: 257px"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in educationList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证/护照" prop="ID_number">
              <el-input
                v-model="formObj.ID_number"
                placeholder="请输入身份证/护照号"
              ></el-input>
            </el-form-item>
            <el-form-item label="学校名称" prop="school">
              <el-input
                v-model="formObj.school"
                placeholder="请输入学校名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="区号电话" prop="area">
              <el-input
                v-model.number="formObj.area"
                placeholder="请输入区号电话"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="指导教师" prop="advisor">
              <el-input
                v-model.number="formObj.advisor"
                placeholder="请输入指导教师姓名"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
              <el-input
                v-model="formObj.email"
                placeholder="请输入电子邮箱地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="formObj.phone" placeholder="请输入手机号码">
              </el-input>
            </el-form-item>
            <el-form-item label="通讯地址" prop="address">
              <el-input
                v-model="formObj.address"
                placeholder="请输入通讯地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮编" prop="postcode">
              <el-input
                v-model.number="formObj.postcode"
                placeholder="请输入邮编"
              ></el-input>
            </el-form-item>
            <el-form-item label="其他作者" prop="other_author">
              <el-input
                v-model="formObj.other_author"
                placeholder="请输入其他作者"
              ></el-input>
            </el-form-item>
            <div class="title">作品信息</div>
            <el-form-item label="作品简介" prop="desc">
              <el-input
                v-model="formObj.desc"
                type="textarea"
                placeholder="请输入作品简介~"
                rows="7"
                maxlength="300"
              >
              </el-input>
              <div class="tips">
                “作品简介”主要介绍作品的技术内容、发明作品的结构和工作原理，设计和制作方面的创新特点及应
                用前景。不超过300字，如获得过奖项可提供获奖证书附件。
              </div>
            </el-form-item>
            <el-form-item label="封面图" prop="cover">
              <Upload
                uploadType="avatar"
                :value.sync="formObj.cover"
                :beforeUploadFun="beforeUploadCoverFun"
              />
              <div class="tips">支持jpg/gif/png格式，最佳尺寸840*600</div>
            </el-form-item>
            <el-form-item label="作品图片" prop="img">
              <Upload
                :fileList.sync="formObj.img"
                :beforeUploadFun="beforeUploadImgFun"
              />
              <div class="tips">
                支持jpg/gif/png格式，推荐尺寸1200*800px（高度不超过9999px），最多上传9张，图片10m以内。
              </div>
            </el-form-item>
            <el-form-item label="作品视频" prop="video">
              <Upload
                uploadType="videoList"
                :limit="3"
                :fileList.sync="formObj.video"
                :beforeUploadFun="beforeUploadVideoFun"
              />
              <div class="tips">
                最多上传/导入3个视频，单个视频不超过500M，视频作品将会展示在作品队列首位
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit(1)">确认提交</el-button>
              <el-button @click="submit(2)">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary">
          <div class="flexRow Ycenter">
            <img src="../assets/img/download-icon.png" alt />
            <span class="text" @click="download">下载表格</span>
          </div>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { regionSelect, provinceSelect } from '../api/review'
import { nationSelect, educationSelect, draftInfo, apply } from '../api/apply'
import Upload from '../components/upload'
import { noNull } from '../utils/auth'
export default {
  components: { Upload },
  data() {
    return {
      regionList: [],
      provinceList: [],
      nationList: [], // 民族列表
      educationList: [], // 学历列表
      formObj: {
        project_name: '', //项目名称
        referrals: '1', // 项目推介 1项目推荐2现场挑战赛,
        name: '', // 姓名
        sex: '1', // 性别 0女1男
        birth: '', // 出生年月
        region_id: '', // 区域id
        province_id: '', // 省份id
        nation: '', // 民族
        culture: '', // 文化程度
        ID_number: '', // 身份证/护照
        school: '', // 学校名称
        area: '', // 区号电话
        advisor: '', // 指导老师
        email: '', // 电子邮箱
        phone: '', // 手机
        address: '', // 通讯地址
        postcode: '', // 邮编
        other_author: '', // 其他作者
        type: '1', // 作品参赛类型 1成功类 2创意类
        patent_number: '', // 申请号
        date: '', // 授权日期
        modality: '1', // 呈现形式 1有模型2有论文
        desc: '', // 作品简介
        cover: '', // 封面图
        img: [], // 图片 ,号隔开
        video: [], // 视频 ,号隔开
        category: '1' // 类型 1科创类 2文创类
      },
      rules: {
        project_name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择参赛类型', trigger: 'change' }
        ],
        patent_number: [
          { required: true, message: '请输入专科申请号', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择申请日期', trigger: 'change' }
        ],
        name: [{ required: true, message: '请输入作者姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        birth: [
          { required: true, message: '请选择出生年月', trigger: 'change' }
        ],
        region_id: [
          { required: true, message: '请选择区域', trigger: 'change' }
        ],
        province_id: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        nation: [{ required: true, message: '请选择民族', trigger: 'change' }],
        culture: [
          { required: true, message: '请选择文化程度', trigger: 'change' }
        ],
        ID_number: [
          { required: true, message: '请输入身份证/护照', trigger: 'blur' }
        ],
        school: [
          { required: true, message: '请输入学校名称', trigger: 'blur' }
        ],
        advisor: [
          { required: true, message: '请输入指导老师', trigger: 'blur' }
        ],
        email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        address: [
          { required: true, message: '请输入通讯地址', trigger: 'blur' }
        ],
        desc: [{ required: true, message: '请输入作品简介', trigger: 'blur' }],
        cover: [{ required: true, message: '请选择封面图', trigger: 'change' }],
        img: [
          {
            type: 'array',
            required: true,
            message: '请上传图片',
            trigger: 'change'
          }
        ]
      }
    }
  },
  mounted() {
    this.getRegionSelect()
    this.getNationSelect()
    this.getEducationSelect()
    this.getDraftInfo()
  },
  methods: {
    getRegionSelect() {
      regionSelect({ type: 1 }).then((res) => {
        this.regionList = res.data
      })
    },
    regionChange() {
      this.formObj.province_id = ''
      this.getProvinceSelect()
    },
    getProvinceSelect() {
      provinceSelect({ region_id: this.formObj.region_id }).then((res) => {
        this.provinceList = res.data
      })
    },
    getNationSelect() {
      nationSelect({}).then((res) => {
        this.nationList = res.data
      })
    },
    getEducationSelect() {
      educationSelect({}).then((res) => {
        this.educationList = res.data
      })
    },
    getDraftInfo() {
      draftInfo({}).then((res) => {
        this.formObj = noNull(res.data)
        if (!this.formObj.referrals) {
          this.formObj.referrals = 1
        }
        if (!this.formObj.sex) {
          this.formObj.sex = 1
        }
        if (!this.formObj.type) {
          this.formObj.type = 1
        }
        if (!this.formObj.modality) {
          this.formObj.modality = 1
        }
        if (!this.formObj.category) {
          this.formObj.category = 1
        }
        if (this.formObj.img.length > 0) {
          let list = []
          this.formObj.img.forEach((url) => {
            list.push({ url })
          })
          this.formObj.img = list
        }
        if (this.formObj.video.length > 0) {
          let list = []
          this.formObj.video.forEach((url) => {
            list.push({ url })
          })
          this.formObj.video = list
        }
        if (this.formObj.region_id) {
          this.getProvinceSelect()
        }
      })
    },
    download() {
      window.open(this.formObj.apply_file)
    },
    // 封面图上传限制
    beforeUploadCoverFun(file) {
      let isJPG = false
      if (
        file.type == 'image/jpeg' ||
        file.type == 'image/png' ||
        file.type == 'image/gif'
      ) {
        isJPG = true
      }
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
        return isJPG
      }
      return true
    },
    // 作品图片上传限制
    beforeUploadImgFun(file) {
      let isJPG = false
      if (
        file.type == 'image/jpeg' ||
        file.type == 'image/png' ||
        file.type == 'image/gif'
      ) {
        isJPG = true
      }
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
        return isJPG
      }
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10M!')
        return isLt10M
      }
      return true
    },
    // 作品视频上传限制
    beforeUploadVideoFun(file) {
      let isJPG = false
      if (
        file.type == 'video/avi' ||
        file.type == 'video/mov' ||
        file.type == 'video/rmvb' ||
        file.type == 'video/rm' ||
        file.type == 'video/flv' ||
        file.type == 'video/mp4'
      ) {
        isJPG = true
      }
      const isLt500M = file.size / 1024 / 1024 < 500
      if (!isJPG) {
        this.$message.error('上传视频只能是 AVI/MOV/RMVB/RM/FLV/MP4 格式!')
        return isJPG
      }
      if (!isLt500M) {
        this.$message.error('上传视频大小不能超过 500M!')
      }
      return isLt500M
    },
    // 提交
    submit(status) {
      let parmas = {
        ...this.formObj,
        status
      }
      if (status == 1) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.applyFun(parmas)
          }
        })
      } else {
        this.applyFun(parmas)
      }
    },
    applyFun(parmas) {
      let urlList = [],
        urlList1 = []
      parmas.img.forEach((item) => {
        urlList.push(item.url)
      })
      parmas.img = urlList.join(',')

      parmas.video.forEach((item) => {
        urlList1.push(item.url)
      })
      parmas.video = urlList1.join(',')
      apply(parmas).then(() => {
        this.$message.success('保存成功')
        if (parmas.status == 1) {
          this.$router.go(-1)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #eff1f4;
  padding-bottom: 120px;
}
.apply-box {
  width: 100%;
  height: 400px;
  background: url('../assets/img/about-bg.png') no-repeat center center;
  background-size: cover;
  padding-left: 249px;
  box-sizing: border-box;
  color: #ffffff;
  .title {
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 15px;
  }
  .content {
    font-size: 28px;
  }
}
.w1420 {
  padding-top: 60px;
}
.content-box {
  padding: 60px 184px 99px 60px;
  box-sizing: border-box;
  width: 1200px;
  background: #ffffff;
  .title {
    padding-left: 12px;
    border-left: 6px solid #3385ff;
    font-size: 28px;
    color: #262626;
    margin-top: 90px;
    margin-bottom: 60px;
    &.nomt {
      margin-top: 0;
    }
  }
  .form {
    /deep/ .el-form {
      .el-form-item {
        margin-bottom: 30px;
      }
      .el-form-item__label {
        color: #262626;
        font-size: 22px;
        line-height: 67px;
        padding-right: 35px;
      }
      .el-textarea {
        color: #666666;
        font-size: 22px;
        .el-input__count {
          font-size: 22px;
        }
      }
      .el-input__inner {
        height: 67px;
        font-size: 22px;
      }
      .el-form-item__content {
        line-height: 67px;
      }
      .el-radio__inner {
        width: 22px;
        height: 22px;
        border: 2px solid #999999;
      }
      .el-radio {
        margin-right: 98px;
      }
      .el-radio__input.is-checked .el-radio__inner {
        background: transparent;
        border-color: #3385ff;
      }
      .el-radio__inner::after {
        width: 10px;
        height: 10px;
        background-color: #3385ff;
      }
      .el-radio__label {
        font-size: 20px;
        color: #262626;
      }
      .el-input__prefix,
      .el-input__suffix {
        font-size: 20px;
      }
      .el-icon-plus {
        color: #cccccc;
        font-size: 100px;
        line-height: 148px;
      }
      .el-button {
        width: 300px;
        height: 70px;
        font-size: 22px;
        border: none;
        &.el-button--default {
          color: #3385ff;
          background: rgba(51, 133, 255, 0.1);
        }
      }
      .el-button + .el-button {
        margin-left: 20px;
      }
    }
    .tips {
      margin: 20px 0;
      font-size: 18px;
      color: #999999;
      line-height: 30px;
    }
  }
}
.btn {
  .el-button {
    width: 200px;
    height: 66px;
  }
  img {
    width: 24px;
    height: 28px;
    margin-right: 23px;
  }
  .text {
    font-size: 22px;
    color: #ffffff;
  }
}
</style>
<style lang="scss">
.el-year-table,
.el-month-table,
.el-date-table {
  font-size: 16px;
}
</style>